<!--  -->
<template>
  <div>
    <ul class="todo-main"
        v-for="(item) in todoList"
        :key="item.id">
      <list-item :item="item"
                 :deleteItem="deleteItem"
                 :changeItemStatus="changeItemStatus"></list-item>
    </ul>
  </div>
</template>

<script>
import ListItem from './ListItem.vue'
export default {
  components: { ListItem },
  data () {
    return {

    }
  },
  // props: {
  //   "todoList": {
  //     type: Array,
  //     default: [],
  //     required: true
  //   },
  // },
  props: ['deleteItem', 'todoList', 'changeItemStatus'],
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>